import React, { useState } from 'react';
import { Row, Col, Form, Select, Button, InputNumber, AutoComplete } from 'antd';
import { VerticalRightOutlined, VerticalLeftOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import InputGroupWithFormItem from '@/components/InputGroupWithFormItem';
import _ from 'lodash';
import { groupByCates } from './configs';

export default function Terms({ prefixField, fieldsOptions, values }) {
  const { t } = useTranslation('alertRules');
  const [expanded, setExpanded] = useState(false);
  const [search, setSearch] = useState('');

  return (
    <Row gutter={16} data-oid='zqk2s4b'>
      <Col flex='auto' data-oid='3ih-x0y'>
        <Row gutter={16} data-oid='kl-r:g2'>
          <Col span={expanded ? 6 : 12} data-oid='2n94g94'>
            <Form.Item {...prefixField} name={[prefixField.name, 'cate']} noStyle data-oid='nkz856h'>
              <Select style={{ width: '100%' }} data-oid='wpy7ivw'>
                {groupByCates.map((func) => (
                  <Select.Option key={func} value={func} data-oid='93yg.kr'>
                    {func} ({t(`datasource:es.${func}.label`)})
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={expanded ? 6 : 12} data-oid='0r26kx-'>
            <InputGroupWithFormItem label='Field key' labelWidth={80} data-oid='0z-ab29'>
              <Form.Item {...prefixField} name={[prefixField.name, 'field']} rules={[{ required: true, message: '必须填写 field key' }]} data-oid='vbbpv4q'>
                <AutoComplete
                  dropdownMatchSelectWidth={false}
                  options={_.filter(fieldsOptions, (item) => {
                    if (search) {
                      return item.value.includes(search);
                    }
                    return true;
                  })}
                  style={{ width: '100%' }}
                  onSearch={setSearch}
                  data-oid='5twj9-8'
                />
              </Form.Item>
            </InputGroupWithFormItem>
          </Col>
          {expanded && (
            <>
              <Col span={6} data-oid='eqrzx3p'>
                <InputGroupWithFormItem label={t('datasource:es.terms.size')} data-oid='2fz4dj-'>
                  <Form.Item {...prefixField} name={[prefixField.name, 'size']} noStyle data-oid='owewq:_'>
                    <InputNumber style={{ width: '100%' }} min={0} data-oid='w_dbw6g' />
                  </Form.Item>
                </InputGroupWithFormItem>
              </Col>
              <Col span={6} data-oid='c9:c207'>
                <InputGroupWithFormItem label={t('datasource:es.terms.min_value')} data-oid='7qi1xn1'>
                  <Form.Item {...prefixField} name={[prefixField.name, 'min_value']} noStyle data-oid='_5jnz.5'>
                    <InputNumber style={{ width: '100%' }} data-oid='qzs:lje' />
                  </Form.Item>
                </InputGroupWithFormItem>
              </Col>
              <Col span={6} data-oid='u-kr7c.'>
                <InputGroupWithFormItem label='Order' data-oid='z4c3zbc'>
                  <Form.Item {...prefixField} name={[prefixField.name, 'order']} data-oid='8zpgq2r'>
                    <Select data-oid='d2.unny'>
                      <Select.Option value='desc' data-oid='c9yi5s2'>
                        Descend
                      </Select.Option>
                      <Select.Option value='asc' data-oid='xvw55o-'>
                        Ascend
                      </Select.Option>
                    </Select>
                  </Form.Item>
                </InputGroupWithFormItem>
              </Col>
              <Col span={6} data-oid='_n.2i9-'>
                <InputGroupWithFormItem label='OrderBy' data-oid='_pwtgem'>
                  <Form.Item {...prefixField} name={[prefixField.name, 'orderBy']} data-oid='_dfb:4b'>
                    <Select data-oid='yw-pb.s'>
                      <Select.Option value='_key' data-oid='l_mhfqh'>
                        Term value
                      </Select.Option>
                      <Select.Option value='_count' data-oid='o85g0rf'>
                        Count
                      </Select.Option>
                      {_.map(values, (item) => {
                        const key = `${item.func} ${item.field}`;
                        return (
                          <Select.Option key={item.ref} value={key} data-oid='4fyyyuh'>
                            {key}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </InputGroupWithFormItem>
              </Col>
            </>
          )}
        </Row>
      </Col>
      <Col flex='88px' data-oid='96f4y91'>
        <Button
          onClick={() => {
            setExpanded(!expanded);
          }}
          data-oid='8miers1'
        >
          {t('datasource:es.terms.more')} {expanded ? <VerticalLeftOutlined data-oid='pekrt39' /> : <VerticalRightOutlined data-oid='m15omeb' />}
        </Button>
      </Col>
    </Row>
  );
}
